<template>
  <div class="product-detail">
    <!-- 头部区域 -->
    <header class="detail-nav">
      <i class="iconfont iconfont-fanhui"></i>
      <div class="nav-list">
        <span :class="{ active: navIndex == 0 }" @click="navSelect(0)">
          <i :class="['iconfont', { 'iconfont-xiaoren1': navIndex == 0 }]"></i
          >商品
        </span>
        <span :class="{ active: navIndex == 1 }" @click="navSelect(1)">
          <i :class="['iconfont', { 'iconfont-xiaoren1': navIndex == 1 }]"></i
          >商品详情
        </span>
        <span :class="{ active: navIndex == 2 }" @click="navSelect(2)">
          <i :class="['iconfont', { 'iconfont-xiaoren1': navIndex == 2 }]"></i
          >商品推荐
        </span>
      </div>
      <i class="iconfont iconfont-gengduo1"></i>
    </header>
    <!-- <z-header>
      <template v-slot:search>
        <span class="active">
          <i class="iconfont iconfont-xiaoren1"></i>商品
        </span>
        <span> <i class="iconfont iconfont-xiaoren1"></i>商品详情 </span>
        <span> <i class="iconfont iconfont-xiaoren1"></i>商品推荐 </span>
      </template>
    </z-header> -->
    <!-- 轮播图 -->
    <section class="product-focus">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        class="swiper-container"
      >
        <van-swipe-item v-for="(item, index) in sliderList" :key="index">
          <img :src="item" class="swiper_img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </section>
    <!-- 详情信息 -->
    <section class="detail-info" ref="xiangqing">
      <p class="detail-info-name">
        {{ detileInfo.name }}
      </p>
      <p class="detail-info-subtitle">{{ detileInfo.subtitle }}</p>
      <div>
        <span class="detail-info-price">￥{{ detileInfo.originalPrice }}</span>
        <span class="detail-info-stock">库存{{ detileInfo.stock }}件</span>
      </div>
    </section>

    <!-- 商品详情 -->
    <section class="detail-content" ref="detailContent" id="content">
      <p class="detail-gap"></p>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
      </ul>
      <div class="detail" v-html="detileInfo.detail">
        <!-- <p>
          <img
            alt="A973_01.png"
            src="http://img.happymmall.com/8d83d44f-1765-4e99-9afe-8bea41ac8867.png"
            width="790"
            height="796"
          /><img
            alt="A973_03.png"
            src="http://img.happymmall.com/985d7567-6162-4b35-a689-045a0564643c.png"
            width="790"
            height="757"
          /><img
            alt="A973_05.png"
            src="http://img.happymmall.com/cb79ca69-8f52-466b-b94e-55f4109ba31a.png"
            width="790"
            height="761"
          /><img
            alt="A973_13.png"
            src="http://img.happymmall.com/18ee59df-89cb-4e80-9875-6544108e4587.png"
            width="790"
            height="792"
          /><img
            alt="A973_14.png"
            src="http://img.happymmall.com/08abd77b-4615-4b93-9465-af748d640a85.png"
            width="790"
            height="969"
          /><img
            alt="A973_15.png"
            src="http://img.happymmall.com/7e33d43a-a946-4d44-a68d-3050eeb1e9cc.png"
            width="790"
            height="716"
          /><br />
        </p> -->
      </div>
    </section>

    <!-- 购物样式 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="handShopCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- Sku信息 -->
    <!-- :goods  绑定商品信息 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <!-- :quota="quota" 是否限购
      :quota-used="quotaUsed"  用户已购买过的商品数量-->
  </div>
</template>

<script>
// import zHeader from "../../components/common/z-header.vue"
import { getProductDetail } from "@/api";

export default {
  data() {
    return {
      id: this.$route.params.id,
      navIndex: 0, //导航索引
      //   组装的轮播图集合
      sliderList: [],
      //   基本信息
      detileInfo: {},
      show: false, //Sku是否显示
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "", // 用于预览显示的规格类目图片
              },
              {
                id: "1",
                name: "蓝色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      // 对应的头部商品图片信息
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img01.yzcdn.cn/1.jpg",
      },
      goodsId: 2261,
    };
  },
  components: {},
  methods: {
    // 购买商品事件
    onBuyClicked() {},
    // Sku添加到购物车事件
    onAddCartClicked() {
      console.log('添加购物车方法');
    },
    handShopCart() {
      // 加入购物车时， 先判断用户是否登录
      if (!this.$store.getters.getIsLogin) {
        // 未登录操作
        this.$dialog
          .alert({
            // closeOnclickOverlay: true,
            closeOnClickOverlay: true,
            message: "未登录请先登录",
          })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // 因为then是promsi的一个成功回调，就会有失败回调
            console.log("关闭了窗口");
          });
        return;
      }
      // 用户登录操作
    },
    // 页面滚动方法
    navSelect(index) {
      this.navIndex = index;
      //   跳转至 对应位置
      console.log(window.screen.height); //设备高度，
      console.dir(this.$refs.xiangqing);
      // this.$refs.xiangqing.offsetTop = 0
      switch (index) {
        case 0:
          window.scroll(0, 0);
          break;
        case 1:
          window.scroll(0, this.$refs.xiangqing.offsetTop + 80);
          break;
        default:
          window.scroll(0, this.$refs.xiangqing.offsetTop + 280);
          break;
      }
    },
    scrollToView(e) {
      let $type = e.target.getAttribute("data-type");
      console.log($type);
      switch ($type) {
        case "product":
          this.navIndex = 0;
          break;
        case "detail":
          this.navIndex = 1;
          break;
        case "recommend":
          this.navIndex = 2;
          break;
      }
    },
  },
  created() {
    //   用$router跳转路由, $route用来获取参数
    //   this.$route.query(id) 获取地址栏中传过来的id
    console.log(this.$route.params);
    // 获取商品的详细信息
    getProductDetail({ id: this.$route.params.id }, (res) => {
      console.log(res);
      this.detileInfo = res.data;
      // 处理详细数据
      // 组装轮播图
      // 将字符串以逗号分隔成数组
      const list = res.data.subImages.split(",");
      const imageHost = res.data.imageHost;
      let temImg = [];
      list.forEach((element) => {
        temImg.push(imageHost + element);
      });
      this.sliderList = temImg;

      /*
          组装商品的Sku数据
      */
      // 商品的默认图片
      this.goods.picture = temImg[0]; //去第0张图
      // 组装规格数据
      let tempTreeV = [];
      for (let index = 0; index < 2; index++) {
        let obj = {
          id: '' + index, // skuValueId：规格值 id
          name: index == 0 ? "红色" : "蓝色", // skuValueName：规格值名称
          imgUrl: temImg[index], // 规格类目图片，只有第一个规格类目可以定义图片
          previewImgUrl: temImg[index], // 用于预览显示的规格类目图片
        };
        tempTreeV.push(obj);
      }
      this.sku.tree[0].v = tempTreeV;
      // console.log(this.sku.tree.v);
      let preItem = {  // 商品有对应的s1  s2两种规格
        id: this.detileInfo.id, // skuId
        s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
        // s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
        price: this.detileInfo.price, // 价格（单位分）
        stock_num: this.detileInfo.stock - 5, // 当前 sku 组合对应的库存
      };
      let preItem2 = {  // 商品有对应的s1  s2两种规格
        id: this.detileInfo.id, // skuId
        s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
        // s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
        price: this.detileInfo.price, // 价格（单位分）
        stock_num: this.detileInfo.stock - 5, // 当前 sku 组合对应的库存
      };
      this.sku.list = [preItem, preItem2]
      this.show = true

      // 价格和库存
      this.sku.price = this.detileInfo.price // 默认价格（单位元）
        this.sku.stock_num = this.detileInfo.stock - 0 // 商品总库存
    });
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.product-detail {
  width: 100%;

  .detail-nav {
    @include fj;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 88px;
    padding: 0 20px;
    line-height: 88px;
    box-sizing: border-box;
    z-index: 1000;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    i {
      font-size: 50px;
      color: #000;
    }

    div span {
      padding: 0 20px;
      font-size: 28px;

      &.active {
        color: $red;
      }

      .iconfont {
        padding-right: 8px;
        font-size: 28px;
        color: $red;
      }
    }
  }
}
.product-focus {
  margin-top: 88px;

  .swiper-container {
    .swiper_img {
      width: 100%;
      height: 700px;
    }
  }
}
.detail-info {
  width: 100%;
  padding: 20px 30px;
  font-size: 30px;
  box-sizing: border-box;

  .detail-info-name {
    font-size: 40px;
    color: #333;
  }

  .detail-info-subtitle {
    padding: 10px 0;
    font-size: 28px;
    color: #999;
  }

  div {
    @include fj;
    height: 70px;
    line-height: 80px;
    padding: 10px 0;
    font-size: 32px;
    color: #999;

    .detail-info-price {
      color: $red;
      font-size: 44px;
    }
  }
}

.detail-content {
  width: 100%;

  .detail-gap {
    width: 100%;
    height: 20px;
    background: #eee;
  }

  ul {
    @include fj;
    width: 100%;
    margin: 20px 0;

    li {
      flex: 1;
      padding: 10px 0;
      text-align: center;
      font-size: 30px;
      border-right: 1px solid #999;
      box-sizing: border-box;

      &:last-child {
        border-right: none;
      }
    }
  }

  div {
    width: 100%;
    overflow: hidden;

    p {
      width: 100%;
      font-size: 40px;
      text-align: center;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss">
.detail {
  p {
    width: 100%;
  }
  img {
    width: 100%;
    height: auto;
  }
}
</style>